<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>达姆</li>
        <li>老付</li>
        <li>安妮</li>
        <li>陪悦</li>
        <li>小乐</li>
        <li>欣宇</li>
        <li>晓恩</li>
    </ul>
</body>
<script>
    //document-fragment; document有的api 文档碎片都有!
    var liNodes = document.querySelectorAll("ul li");
    var ulNode = document.querySelector("ul");
    // var liNodes = ulNode.getElementsByTagName("li");


    //触发dom重新排布
    ulNode.innerHTML += "<li>周冬雨</li>";
    liNodes = document.querySelectorAll("ul li");


    for(var i=0;i<liNodes.length;i++){
        liNodes[i].style.background = "pink"
    }
</script>
</html>